<template>
    <div>
        <breadcrumb :title="'应用权限管理'" :noBack="true"></breadcrumb>
        <div class="box white-block" v-loading="loading">
            <div class="toolbar">
                <el-input v-model="resName" placeholder="请输入应用名称" class="input mr10"></el-input>
                <el-select v-model="state" placeholder="请选择状态" class="select mr10">
                    <el-option
                        v-for="item in stateList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button class="primary no-radius" @click="getList(1)">查询</el-button>
                <el-button class="minor no-radius" @click="reset()">重置</el-button>
            </div>
            <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                           class="mt20">
                <template slot="operate" slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="openDialog(scope.row.id)">授权管理</el-link>
                </template>
                <template slot="state" slot-scope="scope">
                    <span v-if="scope.row.state==1">上架</span>
                    <span v-else-if="scope.row.state==2" class="error">下架</span>
                </template>
            </table-example>
            <page :data="data" v-if="data" class="mt20 page"></page>
        </div>
        <dialog-msk :show.sync="show" ref="dialog" :width="'960px'" :title="'权限管理'">
            <div v-loading="loading1">
                <div class="toolbar clearfix">
                    <!--                    <select-tree @loadNode="loadNode" :lazy="true" :model.sync="dept" class="mr10"></select-tree>-->
                    <select-tree @loadNode="loadNode" class="openWay mr10"
                                 :loading.sync="provideDeptTree.loading"
                                 :keyWord.sync="provideDeptTree.keyWord"
                                 :renderTree.sync="provideDeptTree.renderTree"
                                 :lazy.sync="provideDeptTree.lazy"
                                 :clearable.sync="provideDeptTree.clearable"
                                 :filterable.sync="provideDeptTree.filterable"
                                 :model.sync="dept"
                                 :accordion.sync="provideDeptTree.accordion"
                                 :expandAll.sync="provideDeptTree.expandAll"
                                 :provideDeptTree="provideDeptTree"
                                 @filterMethod="dataFilter"
                                 :props="dataConsumersprops"
                                 :options="provideDeptTree.options"
                                 @nodeClick="treeNodeClick">
                    </select-tree>
                    <el-input v-model="userName" placeholder="请输入姓名/账号" class="input mr10"></el-input>
                    <el-button class="primary no-radius" @click="etDeptPerList(1)">查询</el-button>
                    <el-button class="minor limit no-radius right" @click="approveRes(1)">一键取消</el-button>
                    <el-button type="minor limit no-radius right" @click="approveRes(0)">一键授权</el-button>
                </div>
                <table-example :data="tableData1" :tableColumn="header1" :slotColumns="slotColumns1"
                               class="mt20">
                    <template slot="operate" slot-scope="scope">
                        <el-link type="primary" v-if="scope.row.isHave==1" @click="isApproveRes(scope.row)">取消授权
                        </el-link>
                        <el-link type="primary" v-else @click="isApproveRes(scope.row)">授权</el-link>
                    </template>
                    <template slot="state" slot-scope="scope">
                        <span v-if="scope.row.state==1">上架</span>
                        <span v-else-if="scope.row.state==2" class="error">下架</span>
                    </template>
                </table-example>
                <page :data="data1" v-if="data1" class="mt20 page1"></page>
            </div>
            <span slot="footer">
            </span>
        </dialog-msk>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import dialogMsk from '../../components/dialog'
    import page from '../../components/pagination'
    import selectTree from '../../components/select-tree'

    export default {
        data() {
            return {
                stateList: [
                    {
                        value: 1,
                        label: '上架'
                    },
                    {
                        value: 2,
                        label: '下架'
                    }
                ],
                tableData: [], // 应用列表数据
                header: [
                    {
                        prop: 'name',
                        label: '应用名称',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resSource',
                        label: '来源',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'state',
                        label: '应用当前状态',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operate',
                        label: '操作',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    }
                ], // 应用列表表头
                tableData1: [], // 授权人员列表
                header1: [
                    {
                        prop: 'ownDeptName',
                        label: '部门',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'name',
                        label: '姓名',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'state',
                        label: '应用当前状态',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operate',
                        label: '操作',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    }
                ], // 授权人员表头
                slotColumns: ['operate', 'state'], // 应用列表自定义列
                slotColumns1: ['operate', 'state'], // 授权人员列表自定义列
                data: {}, // 应用列表分页数据
                data1: {}, // 授权人员列表分页数据
                show: false,
                loading: false,
                loading1: false,
                index: 1,
                index1: 1,
                userName: '', // 授权人员-用户名
                resName: '',
                state: '',
                deptList: [],
                currentApp: '',
                dept: { // 授权人员-部门信息
                    value: '',
                    label: ''
                },
                firstDeptList: null,
                dataConsumersprops: {
                    value: 'id', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.expand) return true
                    }
                },
                provideDeptTree: { // 数据源部门树形下拉框参数
                    lazy: true,
                    clearable: false,
                    filterable: false,
                    accordion: false, // 一次只展开一个同级节点
                    expandAll: false, // 默认展开所有节点
                    loading: false, // 是否显示loading
                    renderTree: true, // 是否显示tree，隐藏后再次显示以此来重新渲染
                    options: [],
                    keyWord: ''
                },
                selectTreeFilter: null
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/gsUserRes/getUserResList', {
                    current: this.index || 1,
                    size: 10,
                    resName: this.resName || '',
                    state: this.state || ''
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.data = result.data
                        delete this.data['records']
                        this.getDtList()
                    }
                    this.$method.updateView()
                }).catch(() => {
                    this.loading = false
                })
            },
            getDtList() {
                this.loading = true
                this.$http.get('/gsUserRes/getDeptList').then(result => {
                    this.loading = false
                    if (result.success) {
                        this.deptList = result.data
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            reset() {
                this.resName = ''
                this.state = ''
                this.getList(1)
            },
            openDialog(id) {
                this.currentApp = id
                if (this.deptList[0]) {
                    this.dept = {
                        value: this.deptList[0].id,
                        label: this.deptList[0].name
                    }
                }
                this.show = true
                this.etDeptPerList()
            },
            etDeptPerList(index) {
                this.loading1 = true
                if (index) this.index1 = index
                this.$http.get('/gsUserRes/getDeptPerList', {
                    current: this.index1 || 1,
                    size: 4,
                    deptId: this.dept.value,
                    resId: this.currentApp,
                    userName: this.userName
                }).then(result => {
                    this.loading1 = false
                    if (result.success) {
                        this.tableData1 = result.data.records
                        this.data1 = result.data
                        delete this.data1['records']
                    }
                }).catch(() => {
                    this.loading1 = false
                })
            },
            approveRes(type) {
                this.loading1 = true
                this.$http.post('/gsUserRes/oneKeyApproveRes', {
                    deptId: this.dept.value,
                    resId: this.currentApp,
                    userName: this.userName,
                    type: type
                }).then(result => {
                    this.loading1 = false
                    if (result.success) {
                        this.etDeptPerList()
                    }
                }).catch(() => {
                    this.loading1 = false
                })
            },
            isApproveRes(row) {
                this.loading1 = true
                this.$http.post('/gsUserRes/isApproveRes', {
                    resId: this.currentApp,
                    userId: row.id
                }).then(result => {
                    this.loading1 = false
                    if (result.success) {
                        row.isHave = !row.isHave ? 1 : 0
                    }
                }).catch(() => {
                    this.loading1 = false
                })
            },
            // loadNode(parentId, callback) {
            //     this.$http.get('/gsUserRes/getDeptList', {
            //         parentId: parentId
            //     }).then(result => {
            //         if (result.success) {
            //             if (result.data[0]) {
            //                 result.data.forEach(item => {
            //                     if (item.expand) {
            //                         item.isLeaf = false
            //                     } else {
            //                         item.isLeaf = true
            //                     }
            //                     if (!item.label) {
            //                         item.label = item.abbreviation || item.name
            //                     }
            //                 })
            //             }
            //             if (callback) callback(result.data)
            //         }
            //     }).catch(() => {
            //     })
            // },
            dataFilter(event, callback) {
                if (this.selectTreeFilter) clearTimeout(this.selectTreeFilter)
                if (event || event !== '') {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = false
                        this.provideDeptTree.keyWord = event
                        this.$http.get('/admin/workbench/getDeptList', {
                            keyWord: event
                        }).then(result => {
                            if (result.success) {
                                this.provideDeptTree.loading = false
                                this.provideDeptTree.options = this.$method.treeProcess(result.data)
                            }
                            this.selectTreeFilter = null
                            if (callback) callback()
                        }).catch(() => {
                            this.provideDeptTree.loading = false
                            this.selectTreeFilter = null
                            if (callback) callback()
                        })
                    }, 300)
                } else {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = true
                        this.provideDeptTree.keyWord = ''
                        if (callback) callback()
                    }, 300)
                }

            },
            loadNode(parentId, callback) {
                if (!parentId && this.firstDeptList) {
                    this.provideDeptTree.loading = false
                    if (callback) callback(this.firstDeptList)
                } else {
                    this.$http.get('/gsUserRes/getDeptList', {
                        parentId: parentId
                    }).then(result => {
                        if (result.success) {
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    // if (item.expand) {
                                    //     item.isLeaf = false
                                    // } else {
                                    //     item.isLeaf = true
                                    // }
                                    if (!item.label) {
                                        item.label = item.abbreviation || item.name
                                    }
                                })
                                if (!this.firstDeptList) this.firstDeptList = result.data
                            }
                            this.provideDeptTree.loading = false
                            if (callback) callback(result.data || [])
                        }
                    }).catch(() => {
                        this.provideDeptTree.loading = false
                        this.$message({
                            type: 'info',
                            message: '获取部门失败!'
                        })
                    })
                }
            },
            treeNodeClick(node, callback) {
                if (callback) callback()
            }
        },
        components: {
            tableExample,
            dialogMsk,
            page,
            breadcrumb,
            selectTree
        }
    }
</script>
<style scoped lang="less">
    p {
        font-size: 0.2rem;
    }

    .input {
        width: 2.8rem;
    }

    .right {
        float: right;
    }

    .select {
        width: 2rem;
    }
</style>
